.event_card {
    box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.04);
    position: relative;

    -webkit-mask: radial-gradient(circle at 2.133333vw 13.4vw, #0000 2.133333vw, red 0);
    // padding: 12.8%; /* 48/375 */
    -webkit-mask-position: -2.133333vw;
    background-color: var(--event-bg);
    border-radius: 4.266667vw;




    margin-bottom: 2.133333vw;





    .event_status {
        position: absolute;
        width: 36.266667vw;
        height: 5.333333vw;
        left: 0;
        top: 0;

        .cricle {
            width: var(--m12);
            margin-right: 1.066667vw;
        }

        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-left: var(--m12);
        font-size: 2.666667vw;
        /* 10/375 */

        font-weight: 400;
        color: #fff;
    }

    .currently_ava {
        background: url('../../../assets/icons/utilityCurrently.svg') center/cover no-repeat;
    }

    .future_ava {
        background: url('../../../assets/icons/utilityFuture.svg') center/cover no-repeat;
    }

    .unknow_ava {
        background: url('../../../assets/icons/utilityUnknow.svg') center/cover no-repeat;
    }

    .qr_icon {
        position: absolute;
        width: 9.6vw;
        height: 9.6vw;
        right: var(--m12);
        top: 2.133333vw;
        cursor: pointer;
    }

    .event_head {
        position: relative;
        border-radius: 4.266667vw 4.266667vw 0 0;

        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 2.666667vw 4.266667vw;

        .counter {
            position: absolute;
            right: 6.093333vw;
            bottom: -var(--m12);
            width: 4vw;
            height: 3.466667vw;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            background: url('../../../assets/icons/countMark.svg') center/cover no-repeat;
            box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);

            border-radius: 0 0 1.6vw 1.6vw;

            &>span {
                font-weight: 400;
                text-transform: capitalize;
                word-wrap: break-word;
                color: #4F48E2;
                font-size: 2.32vw;
            }
        }

        .subNft {
            position: absolute;
            bottom: -2vw;
            left: 50%;
            transform: translate3d(-50%, 0, 0);
            font-family: Montserrat-Light;
            font-size: 2.66vw;
            font-weight: 300;
            color: #7E8189;
            background-color: #fff;
            padding: 0 2.66vw;
            &.dark {
                background-color: var(--event-bg);
            }
        }

        .event_list_v3 {
            position: absolute;
            width: 61.466667vw;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);

        }

        .event_title {
            color: var(--field-text);
            font-size: var(--m12);
            font-family: Montserrat-Medium;
            font-weight: 700;
            text-transform: capitalize;
            width: 53.333333vw;
        }


        .event_avatar {
            width: 8.533333vw;
            height: 8.533333vw;

            display: flex;
            justify-content: center;
            align-items: center;

            &>img {
                width: auto;
                height: auto;
                max-width: 100%;
                max-height: 100%;
            }
        }
    }

    .split {
        display: block;
        width: 100%;
    }

    .event_body {
        padding: 2.4vw 4.266667vw 2.4vw;
        border-radius: 0 0 4.266667vw 4.266667vw;
        background: url('../../../assets/icons/eventBg.png') no-repeat;
        background-size: 60.533333vw;
        background-position: 15.466667vw -8vw;
        position: relative;



        .copy {
            cursor: pointer;
            margin-left: 1.333333vw;
        }

        .event_info {

            display: flex;
            justify-content: flex-start;
            align-items: flex-start;



            .event_details {

                .event_item {
                    display: flex;
                    margin-bottom: 1.6vw;
                    align-items: center;

                    .event_item_icon {
                        width: 4.266667vw;
                        margin-right: 2.133333vw;
                    }

                    .event_icon_value {
                        display: flex;
                        align-items: center;
                        color: var(--field-text);
                        font-size: 2.666667vw;
                        font-family: Montserrat-Light;
                        font-weight: 300;
                        text-transform: capitalize;
                    }

                    .event_link {
                        color: #4F48E2;
                        text-decoration: none;
                        &.dark {
                            color: #6B65E9;
                        }
                    }
                }


            }


        }

        .event_meta {
            .icon {

            }
        }

        .event_tip {
            padding: 2.133333vw;
            border-radius: 2.133333vw;
            background-color: rgba(255, 193, 7, 0.3);
            margin-bottom: 2.133333vw;

            .event_tip_title {
                display: flex;
                align-items: center;

                &>img {
                    margin-right: 1.066667vw;
                    width: 4.266667vw;
                    height: 4.266667vw;
                }

                span {
                    color: #FFC107;
                    font-size: var(--m12);
                    font-weight: 400;
                }
            }

            .event_tip_c {
                margin-top: 1.066667vw;
                color: var(--field-text);
                font-size: 2.666667vw;

                font-weight: 300;
            }

        }

        .event_rules {
            .event_rules_option {
                display: flex;
                align-items: center;
                cursor: pointer;
                justify-content: center;

                &>span {
                    color: var(--main-text);
                    font-size: var(--m12);
                    font-family: Montserrat-Bold;
                    font-weight: 400;
                }


                .option_icon {
                    width: var(--m12);
                    transition: all 0.3s;
                    margin-left: 1.066667vw;
                }

                .option_icon_open {
                    transform: rotate(-180deg);
                }
            }

            .event_rules_body {
                padding-top: 2.133333vw;

                .event_rule {
                    padding-left: var(--m12);
                    position: relative;
                    color: var(--time-text);
                    font-size: 2.666667vw;
                    font-family: Montserrat-Light;
                    font-weight: 300;

                    &::after {
                        display: block;
                        position: absolute;
                        content: '';
                        width: 0.266667vw;
                        height: 0.266667vw;
                        border-radius: 0.266667vw;
                        background: var(--time-text);
                        top: 1.866667vw;
                        left: 1.6vw;
                    }
                }
            }
        }
    }
    .eventMeta {
        display: flex;
        margin: 1vw 0 0 0;
        width: 61vw;
        height: 11.2vw;
        background: #F1F1F3;
        border-radius: 5.6vw;
        align-items: center;
        justify-content: space-between;
        &.dark {
            background-color: rgba(255, 255, 255, 0.3);
        }
        .icon {
            position: relative;
            width: 6.4vw;
            height: 6.4vw;
            z-index: 110;
            img {
                width: 6.4vw;
                height: 6.4vw;
            }
            &:first-child {
                margin: 0 0 0 6.4vw;
            }
            &:last-child {
                margin: 0 6.4vw 0 0 ;
            }
        }
    }

}

.disabled {

    .event_title,
    .event_icon_value {
        color: #A5A5AD !important;
    }

    .event_rules_option>span {
        color: #A5A5AD !important;
    }

    .counter {
        background: url('../../../assets/icons/disabledCounterMark.svg') center/cover no-repeat !important;
    }

    .counter>span {
        color: #A5A5AD !important;
        filter: grayscale(10%);
    }

    .event_item_icon {
        filter: grayscale(10%) !important;
    }

    .copy {
        filter: grayscale(10%) !important;
    }


}
.comingSoon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 69.63vw;
    padding: 0 2.7vw;
    height: 26.66vw;
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(6px);
    border-radius: 5.6vw;
    opacity: 1;
    font-family: Montserrat-Regular;
    font-size: 3.73vw;
    text-align: center;
    color: #5F6FFC;
    font-weight: 400;
}

.subDetail {
    width: 68.93vw;
    background: #F1F1F8;
    border-radius: 5.6vw;
    opacity: 1;
    border: 1px solid #FFFFFF;
    font-family: Montserrat-Light;
    font-size: 3.73vw;
    text-align: center;
    color: #59595F;
    font-weight: 400;
    .hd {
        padding: 4.933vw 0;
        margin: 0 4.26vw;
        font-family: Montserrat-Medium;
        font-size: 4.266vw;
        font-weight: 500;
        color: #181730;
        text-align: center;
        border-bottom: 1px solid #0F0F10;
    }
    .bd {
        font-size: var(--m1);
        margin: 2.66vw 4.26vw 6.93vw;
        font-size:  var(--m13);
        font-weight: 300;
        color: #565562;
        text-align: left;
        li {
            list-style: disc;
            list-style-position: inside;
        }
    }
}
.subDetailClose {
    margin: 6.9vw 0 0;
    display: flex;
    justify-content: center;
    img {
        width: 8.533333vw;
        height: 8.53333vw;
    }
}

.codeWrap {
    width: 68.266vw;
}
.codeInner {
    background-color: #F1F1F8;
    border-radius: var(--m12);
}
.codeHeader {
    height: var(--m44);
    line-height: var(--m44);
    border-bottom: var(--m1) solid #E4E4E4;
    text-align: center;
}
.codeTit {
    font-family: Montserrat-Medium;
    font-size: var(--m14);
    font-weight: 500;
    color: #4F48E2;
}
.codeBody {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: var(--m8) 0 var(--m20);
}
.codeBox {
    display: flex;
    align-items: center;
    flex-direction: column;
}
.codeClose {
    margin: var(--m16) auto 0;
    width: var(--m32);
    height: var(--m32);
}
.barCode {
    height: 20.307vw;
    width: 55.466vw;
}
.qrCode {
    width: 36.266vw;
    height: 36.266vw;
}
.codeText {
    display: flex;
    background-color: #fff;
    margin: var(--m20) 0 var(--m20);
    padding: 0 var(--m24);
    height: var(--m44);
    line-height: var(--m44);
    border-radius: var(--m20);
    align-items: center;
    .text {
        font-size: var(--m14);
        font-family: Montserrat-Regular;
        font-weight: 400;
        color: #59595F;
        line-height: 20px;
    }
    .icon {
        margin: 0 0 0 var(--m8);
        width: var(--m20);
        height: var(--m20);
    }
}

@media screen and (min-width:1280px) {
    .event_card {
        box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.04);
        -webkit-mask: radial-gradient(circle at 10.0267px 62.98px, #0000 10.0267px, red 0);
        // padding: 75.2px;
        -webkit-mask-position: -10.0267px;
        border-radius: 20.0533px;



        margin-bottom: 10.0267px;

        .event_status {

            width: 170.4533px;
            height: 25.0667px;


            .cricle {
                width: 15.04px;
                margin-right: 5.0133px;
            }


            padding-left: 15.04px;
            font-size: 12.5333px;
            /* 10/375 */



        }


        .qr_icon {

            width: 45.12px;
            height: 45.12px;
            right: 15.04px;
            top: 10.0267px;

        }

        .event_head {
            border-radius: 20.0533px 20.0533px 0 0;

            padding: 13.7867px 21.3067px 8.7733px;

            .event_list_v3 {
                width: 288.8933px;
            }

            .counter {
                right: 28.6387px;
                bottom: -15.04px;
                width: 18.8px;
                height: 16.2933px;
                border-radius: 0 0 7.52px 7.52px;

                &>span {
                    font-weight: 400;
                    font-size: 10.904px;
                }
            }

            .event_title {

                font-size: 15.04px;

                width: 250.6667px;
            }


            .event_avatar {
                width: 40.1067px;
                height: 40.1067px;


            }
            .subNft {
                bottom: -6px;
                font-size: 12px;
                padding: 0 6px;
            }
        }


        .event_body {
            padding: 11.28px 20.0533px 11.28px;
            border-radius: 0 0 20.0533px 20.0533px;


            background-size: 284.5067px;
            background-position: 72.69px -37.6px;

            .copy {
                margin-left: 6.2667px;
            }

            .event_info {


                .event_details {

                    .event_item {

                        margin-bottom: 5.0133px;


                        .event_item_icon {
                            width: 20.0533px;
                            margin-right: 10.0267px;
                        }

                        .event_icon_value {

                            font-size: 12.5333px;

                        }
                    }

                    .event_area {
                        margin-top: 7.52px;

                        .event_area_item {
                            margin-right: 15.04px;

                            .event_area_item_icon {
                                width: 20.0533px;
                                margin-right: 6.2667px;
                            }

                            .event_area_item_info {
                                width: 115.3067px;
                                font-size: 12.5333px;
                            }
                        }
                    }
                }

            }

            .event_tip {
                padding: 10.0267px;
                border-radius: 10.0267px;
                background-color: rgba(255, 193, 7, 0.3);
                margin-bottom: 10.0267px;

                .event_tip_title {


                    &>img {
                        margin-right: 5.0133px;
                        width: 20.0533px;
                        height: 20.0533px;
                    }

                    span {

                        font-size: 15.04px;
                        font-weight: 400;
                    }
                }

                .event_tip_c {
                    margin-top: 5.0133px;

                    font-size: 12.5333px;


                }

            }

            .event_rules {
                .event_rules_option {


                    &>span {

                        font-size: 15.04px;

                    }


                    .option_icon {
                        width: 15.04px;

                        margin-left: 5.0133px;
                    }

                    .option_icon_open {
                        transform: rotate(-180deg);
                    }
                }

                .event_rules_body {
                    padding-top: 10.0267px;

                    .event_rule {
                        padding-left: 15.04px;

                        font-size: 12.5333px;


                        &::after {

                            width: 1.2533px;
                            height: 1.2533px;
                            border-radius: 1.2533px;

                            top: 8.7733px;
                            left: 7.52px;
                        }
                    }
                }
            }
        }

        .eventMeta {
            margin: 1vw 0 0 0;
            width: 290px;
            height: 40px;
            background: #F1F1F3;
            border-radius: 40px;
            align-items: center;
            justify-content: space-between;

            &.dark {
                background-color: rgba(255, 255, 255, 0.3);
            }

            .icon {
                width: 20px;
                height: 20px;

                img {
                    width: 20px;
                    height: 20px;
                }

                &:first-child {
                    margin: 0 0 0 20px;
                }

                &:last-child {
                    margin: 0 20px 0 0;
                }
            }
        }

    }
    .comingSoon {
        width: 280px;
        padding: 0 15px;
        height: 80px;
        border-radius: 20px;
        font-size: 14px;
    }
    .subDetail {
        width: 320px;
        border-radius: 16px;
        .hd {
            padding: 25px 0;
            margin: 0 20px;
            font-size: 15px;
            color: #181730;
        }

        .bd {
            margin: 10px 20px 25px;
            font-size: 12px;
        }
    }
    .subDetailClose {
        margin: 36px 0 0;

        img {
            width: 40.1067px;
            height: 40.1067px;
        }
    }


    .codeWrap {
        width: 320px;
    }

    .codeInner {
        border-radius: var(--pc12);
    }

    .codeHeader {
        height: var(--pc44);
        line-height: var(--pc44);
        border-bottom: var(--pc1) solid #E4E4E4;
    }

    .codeTit {
        font-size: var(--pc14);
    }

    .codeBody {
        padding: var(--pc8) 0 var(--pc20);
    }

    .codeClose {
        margin: var(--pc16) auto 0;
        width: var(--pc32);
        height: var(--pc32);
    }

    .barCode {
        height: 82.5px;
        width: 260px;
    }

    .qrCode {
        width: 170px;
        height: 170px;
    }

    .codeText {
        margin: var(--pc20) 0 var(--pc20);
        padding: 0 var(--pc24);
        height: var(--pc44);
        line-height: var(--pc44);
        border-radius: var(--pc20);

        .text {
            font-size: var(--pc14);
        }

        .icon {
            margin: 0 0 0 var(--pc8);
            width: var(--pc20);
            height: var(--pc20);
        }
    }
}